<template>
    <div class="table-sort">
        <div class="table-sort-title">{{ title }}</div>

        <n-tooltip trigger="hover">
            <template #trigger>
                <div class="sort-icon" :class="sort" @click="onSort"></div>
            </template>
            {{ tip[sort] }}
        </n-tooltip>
    </div>
</template>
<script setup>
const props = defineProps({
    title: {
        type: String,
        default: () => "",
    },
    sort: {
        type: String,
        default: () => "",
    },
});

const emits = defineEmits(["sort"]);

const onSort = () => {
    const { sort } = props;
    let str = "";
    if (sort === "") str = "asc";
    else if (sort === "asc") str = "desc";
    else str = "";
    emits("sort", str);
};

const tip = {
    "": "点击升序",
    asc: "点击降序",
    desc: "取消排序",
};
</script>
<style lang="less" scoped>
.table-sort {
    position: relative;
    .sort-icon {
        width: 10px;
        height: 23px;
        position: absolute;
        right: -4px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        opacity: 0.75;
        transition: all 0.2s ease-in-out;
        &:hover {
            opacity: 1;
        }
        &::after {
            content: "";
            position: absolute;
            height: 0;
            width: 0;
            border-bottom: 10px solid var(--box-shadow-color);
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            top: 0;
            transition: all 0.2s ease-in-out;
            transform: translateX(-50%);
        }
        &::before {
            content: "";
            position: absolute;
            height: 0;
            width: 0;
            border-top: 10px solid var(--box-shadow-color);
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            bottom: 0;
            transform: translateX(-50%);
            transition: all 0.2s ease-in-out;
        }
        &.desc {
            &::after {
                border-bottom: 10px solid var(--box-shadow-color);
            }
            &::before {
                border-top: 10px solid var(--primary-color);
            }
        }
        &.asc {
            &::after {
                border-bottom: 10px solid var(--primary-color);
            }
            &::before {
                border-top: 10px solid var(--box-shadow-color);
            }
        }
    }
}
</style>
